<template>
  <div>
    <div style="margin-bottom: 3%;"></div>
    <div style="font-weight: initial ;font-size: 45px;text-align:center;">修 改 密 码</div>
    <div style="margin-bottom: 5%;"></div>

    <el-card style="margin:0 auto;width: 60%;">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
               style="margin:0 auto;width: 60%;">
        <el-form-item label="原密码" style="margin-bottom: 6%;"  prop="password">
          <el-input placeholder="请输入原密码"      v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" style="margin-bottom: 6%;" prop="newPwd">
          <el-input placeholder="请输入新密码"     v-model="ruleForm.newPwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" style="margin-bottom: 6%;" prop="newPwd2">
          <el-input placeholder="请再次输入新密码"    v-model="ruleForm.newPwd2" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="font-size: 20px" type="primary" @click="submitForm('ruleForm')">确认修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      ruleForm: {
        id: '',
        password:'',
        newPwd: '',
        newPwd2: '',
        type: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        newPwd2: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.ruleForm.id = JSON.parse(sessionStorage.getItem("id"))
    this.ruleForm.type = JSON.parse(sessionStorage.getItem("type"))
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {//校验格式
        if (valid) {
          if(this.ruleForm.newPwd !== this.ruleForm.newPwd2){
            this.$message({
              showClose: true,
              message: '两次输入的密码不一致!',
              type: 'error'
            });
          }
          else if(this.ruleForm.password === this.ruleForm.newPwd){
            this.$message({
              showClose: true,
              message: '新密码和旧密码不能相同!',
              type: 'error'
            });
          }
          else{
            console.log(this.ruleForm)
            let path = 'http://localhost:8081/user/' + this.ruleForm.type + 'ChangePwd';
            this.$ajax.post(path,this.ruleForm).then(res=>{
              console.log(res.data);
              if(res.data.status === 0){//密码修改成功
                sessionStorage.clear();
                alert(res.data.message + ' 请重新登录!');
                this.$router.push('/');
              }
              else{
                this.$message.error(res.data.message);
              }
            })
          }
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>